<template>
  <div id="brandlist">
    <div class="nav">
      <van-nav-bar title="制造商" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="brand-lists">
        <router-link :to="`/home/brandlist/brand?id=${item.id}`" class="brand-item" v-for="item in list" :key="item.id" tag="div">
          <img :src="item.app_list_pic_url" class="brand-img" />
          <p class="brand-desc">{{item.name}} | {{item.floor_price}}元起</p>
        </router-link >
      </div>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/home/brandlist";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      listaction({ page: this.page }).then((res) => {
        this.list.push(...res.data);
        this.page ++;
        this.loading= false
        if (res.total == this.page - 1) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  position: fixed;
  width: 375px;
  top: 0;
  left: 0;
  z-index: 99;
}
.brand-lists {
  margin-top: 38px;
}
.brand-item {
  position: relative;
  width: 375px;
  .brand-img {
    width: 375px;
    height: 210px;
  }
  .brand-desc {
    position: absolute;
    display: block;
    width: 375px;
    height: 20px;
    line-height: 20px;
    left: 0;
    top: 50%;
    transform: translateY(-150%);
    font-size: 20px;
    text-align: center;
    color: #fff;
    z-index: 9;
  }
}
</style>